<template>
  <div style="position: relative">
    <div class="middle-dxyy pointer" @click.stop="modalShow(19, 559, 1, true)"></div>
    <div class="middle-bmjsc pointer" @click.stop="modalShow(57, 471, 2, true)"></div>
    <div class="middle-znfx pointer" @click.stop="modalShow(91, 371, 3, true)"></div>
    <div class="middle-irs pointer" @click.stop="modalShow(126, 268, 4, true)"></div>
    <div class="middle-api" @click.stop="modalShow(169, 579, 5, false)"></div>
    <div class="middle-qdhzc pointer" @click.stop="modalShow(230, 711, 6, true)"></div>
    <div class="middle-bzc pointer" @click.stop="modalShow(290, 854, 7, true)"></div>
    <div class="middle-tyc pointer" @click.stop="modalShow(362, 1036, 8, true)"></div>
    <div class="middle-sjzc" @click.stop="modalShow(57, 708, 9, false)"></div>
    <div class="middle-zbgl" @click.stop="modalShow(111, 845, 10, false)"></div>
    <div class="middle-sjbz" @click.stop="modalShow(179, 970, 11, false)"></div>
    <div class="middle-ysj" @click.stop="modalShow(239, 1117, 12, false)"></div>
    <div class="middle-sjzl pointer" @click.stop="modalShow(429, 807, 13, true)"></div>
    <div class="middle-zsj" @click.stop="modalShow(379, 650, 14, false)"></div>
    <div class="middle-sjy pointer" @click.stop="modalShow(409, 1170, 15, true)"></div>
    <!-- 全生命周期 -->
    <div class="line-box1 line-box" @click.stop="modalShow(270, 1300, 16, true)"></div>
    <!-- 数据源到元数据 -->
    <div class="line-box2 line-box" @click.stop="modalShow(360, 1300, 17, true)"></div>
    <!-- 数据源到贴原层 -->
    <div class="line-box3 line-box" @click.stop="modalShow(480, 1100, 18, true)"></div>
    <!-- 贴原层到标准层 -->
    <div class="line-box4 line-box" @click.stop="modalShow(380, 930, 19, true)"></div>
    <!-- 标准层到轻度汇总层 -->
    <div class="line-box5 line-box" @click.stop="modalShow(310, 780, 20, true)"></div>
    <!-- 标准层到主数据 -->
    <div class="line-box6 line-box" @click.stop="modalShow(405, 750, 21, true)"></div>
    <!-- 轻度汇总到Api -->
    <div class="line-box7 line-box" @click.stop="modalShow(255, 640, 22, true)"></div>

    <!-- 元数据到数据标准 -->
    <div class="line-box8 line-box" @click.stop="modalShow(250, 1050, 23, true)"></div>
    <!-- 指标管理到数据资产 -->
    <div class="line-box9 line-box" @click.stop="modalShow(130, 780, 24, true)"></div>
    <!-- 贴源层到数据质量 -->
    <div class="line-box10 line-box" @click.stop="modalShow(420, 900, 25, true)"></div>
    <div class="line-box11 line-box" @click.stop="modalShow(420, 900, 25, true)"></div>
    <!-- 标准层到指标管理 -->
    <div class="line-box12 line-box" @click.stop="modalShow(190, 900, 26, true)"></div>
    <div class="line-box13 line-box" @click.stop="modalShow(190, 900, 26, true)"></div>
    <!-- 轻度汇总到指标管理 -->
    <div class="line-box14 line-box" @click.stop="modalShow(225, 795, 27, true)"></div>
    <div class="line-box15 line-box" @click.stop="modalShow(225, 795, 27, true)"></div>

    <div class="modal-show" v-if="dataShow">
      <DataCollectionTaskCard @closeModal="closeModal" :data1="modalData1" :data2="modalData2" :data3="modalData3"
        :data4="modalData4" :data5="modalData5" :dataNum="dataNum" :title="modalTit" />
    </div>
    <div class="zzcxs-1">
      <div>
        <img src="../../../static/middle/zzcxs.png" style="width: 95px; height: 58px" />
      </div>
      <div class="zzcxs-t">
        <div class="zzcxs-t_1">35</div>
      </div>
    </div>
    <div class="zzcxs-2">
      <div>
        <img src="../../../static/middle/zzcxs.png" style="width: 95px; height: 58px" />
      </div>
      <div class="zzcxs-t">
        <div class="zzcxs-t_1">2345</div>
      </div>
    </div>
    <div class="zzcxs-3">
      <div>
        <img src="../../../static/middle/zzcxs.png" style="width: 95px; height: 58px" />
      </div>
      <div class="zzcxs-t">
        <div class="zzcxs-t_1">6543</div>
      </div>
    </div>
    <div class="zzcxs-4">
      <div>
        <img src="../../../static/middle/zzcxs.png" style="width: 95px; height: 58px" />
      </div>
      <div class="zzcxs-t">
        <div class="zzcxs-t_1">43</div>
      </div>
    </div>
    <div class="zzcxs-5">
      <div>
        <img src="../../../static/middle/zzcxs.png" style="width: 95px; height: 58px" />
      </div>
      <div class="zzcxs-t">
        <div class="zzcxs-t_1">43</div>
      </div>
    </div>
    <!--实时采集  -->
    <div class="sscj">
      <div class="zzcxs-t" style="width: 120px">
        <div class="zzcxs-t_1" style="color: #fff; font-size: 20px; width: 120px">
          实时采集
        </div>
      </div>
    </div>
    <!-- T+1 -->
    <div class="T1">
      <div class="zzcxs-t" style="width: 120px">
        <div class="zzcxs-t_1" style="color: #fff; font-size: 20px; width: 120px">
          T+1采集
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, defineEmits, watch, toRef } from "vue";
  import DataCollectionTaskCard from "../../Modal/DataCollectionTaskCard1.vue";
  import {
    GETmeasureValueMK0502009,
    GETcountIIndicatorType,
    GETdwSuppObjectName,
    GETmeasureValueMK0502007,
    GETdataQualityRuleCount,
    GETdataQualityRuleCountRank,
    GETlistDwSuppObjectType1,
    GETdwTablesCountEtlDwm,
    GETdwTablesCount,
    GETfieldCount,
    GETbusinessCount,
    GETtycbCount,
    GETsourceLayerTableRecord,
    GETmeasureValueMK1,
    GETmeasureValueMK2,
    GETmeasureValueMK3,
    GETmeasureValueMK4,
    GETmeasureValueMK5,
    GETirsGjRate,
    GETmeasureValueMK0105,
    GETmeasureValueMK01055,
    GETmeasureValueMK01054,
    GETmeasureValueMK01053,
    GETmeasureValueMK01052,
    GETlistDwSuppObjectTypeNameListMx,
    GETmeasureValue,
    GETcountEtlDwmTable,
    GETcolumnsCount,
    GETcountEtlDwsTable,
    GETmeasureValueMK1216151413,
    GETlstructuredDataStorage,
    GETunStructuredDataStorage,
    GETtaskStatus,
    GETtaskFailCount,
    GETfirstBusinessCount,
    GETqualityCheckTaskCount,
    GETqualityCheckTaskRunCount,
    GETqualityCheckTaskWaitCount,
    GETqualityCheckTaskSuccessCount,
    GETqualityCheckTaskFailCount,
    GETmeasureValueMK0701018,
    GETmeasureValueMK0701026,
    GETirsCount,
    GETirsGjCount,
    semiStructuredDataStorage,
    // GETmeasureValueMK0105,GETmeasureValueMK01052,GETmeasureValueMK01053,GETmeasureValueMK01054,
    GETdataResourceCount
  } from "@/api/index";
  const dataShow = ref(false);
  const t = ref("0px");
  const r = ref("0px");
  const modalData1 = ref({});
  const modalData2 = ref({});
  const modalData3 = ref({});
  const modalData4 = ref({});
  const modalData5 = ref({});
  const dataNum = ref(5);
  const modalTit = ref();
  const ifClick = ref(false);

  const props = defineProps({
    dataShow: {
      type: Boolean,
      default: false,
    },
  });

  // watch(
  //   () => props.isClosable,
  //   (to, old) => {
  //     console.log("变换的to", !to);

  //     dataShow.value = !to;
  //   },
  //   { immediate: true }
  // );

  const emit = defineEmits(["closeTeleport"]);
  const modalShow = (q, w, type, ifOpen) => {
    if (!ifOpen) return;
    console.log(type, "num");
    t.value = q - 170 + "px";
    r.value = w - 145 + "px";
    clearData();
    getData(type);
    dataShow.value = true;
    emit("clild", false);
  };

  const closeModal = () => {
    dataShow.value = false;
    emit("update:dataShow", false);
  };
  const getData = (type) => {
    if (type === 1) {
      dataNum.value = 1;
      modalTit.value = "";
      GETmeasureValueMK0502009().then((res) => {
        modalData1.value = {
          labelName: "接口支撑典型应用数：",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 2) {
      dataNum.value = 1;
      modalTit.value = "";
      GETcountIIndicatorType().then((res) => {
        modalData1.value = {
          labelName: "指标数：",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 3) {
      dataNum.value = 3;
      modalTit.value = "";
      GETdwSuppObjectName().then((res) => {
        modalData1.value = {
          labelName: "热门接口排行",
          labelValue: res.data || 0,
        };
      });
      GETmeasureValueMK0502007().then((res) => {
        modalData2.value = {
          labelName: "调用单位数：",
          labelValue: res.data[0]?.value || 0,
        };
        modalData3.value = {
          labelName: "接口调用量：",
          labelValue: res.data[1]?.value || 0,
        };
      });
    } else if (type === 4) {
      dataNum.value = 2;
      modalTit.value = "";
      // GETirsGjRate().then((res) => {
      //   modalData1.value = {
      //     labelName: "IRS编目归集率",
      //     labelValue: res.data?.value || 0,
      //   };
      // });
      GETirsCount().then((res) => {
        modalData1.value = {
          labelName: "IRS编目数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETirsGjCount().then((res) => {
        modalData2.value = {
          labelName: "IRS归集数:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 5) {
      modalTit.value = "";
    } else if (type === 6) {
      dataNum.value = 2;
      modalTit.value = "";
      GETfieldCount().then((res) => {
        modalData1.value = {
          labelName: "轻度汇总层表数量:",
          labelValue: res.data?.count || 0,
        };
      });
      GETbusinessCount().then((res) => {
        // console.log(res, "000");
        modalData2.value = {
          labelName: "轻度汇总层表记录数:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 7) {
      dataNum.value = 2;
      modalTit.value = "";
      GETdwTablesCountEtlDwm().then((res) => {
        modalData1.value = {
          labelName: "标准层表数量:",
          labelValue: res.data?.count || 0,
        };
      });
      GETdwTablesCount().then((res) => {
        modalData2.value = {
          labelName: "标准层表记录数:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 8) {
      dataNum.value = 2;
      modalTit.value = "";
      GETtycbCount().then((res) => {
        modalData1.value = {
          labelName: "贴源层表数量:",
          labelValue: res.data?.value || 0,
        };
      });
      GETsourceLayerTableRecord().then((res) => {
        modalData2.value = {
          labelName: "贴源层表记录数:",
          labelValue: res.data?.value || 0,
        };
      });
    } else if (type === 9) {
      modalTit.value = "";
    } else if (type === 10) {
      modalTit.value = "";
    } else if (type === 11) {
      // dataNum.value = 5;
      // modalTit.value = "";
      // // 数据标准
      // GETmeasureValueMK0105().then((res) => {
      //   modalData1.value = {
      //     labelName: "数据标准检验任务数",
      //     labelValue: res.data?.count || 0,
      //   };
      // });
      // GETmeasureValueMK01055().then((res) => {
      //   modalData5.value = {
      //     labelName: "失败数",
      //     labelValue: res.data?.count || 0,
      //   };
      // });
      // GETmeasureValueMK01054().then((res) => {
      //   modalData4.value = {
      //     labelName: "成功数",
      //     labelValue: res.data?.count || 0,
      //   };
      // });
      // GETmeasureValueMK01053().then((res) => {
      //   modalData3.value = {
      //     labelName: "等待运行数",
      //     labelValue: res.data?.count || 0,
      //   };
      // });
      // GETmeasureValueMK01052().then((res) => {
      //   modalData2.value = {
      //     labelName: "运行数",
      //     labelValue: res.data?.count || 0,
      //   };
      // });
    } else if (type === 12) {
      modalTit.value = "";
    } else if (type === 13) {
      modalTit.value = "";
      dataNum.value = 1;
      GETdataQualityRuleCount().then((res) => {
        modalData1.value = {
          labelName: "数据质量规则数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETdataQualityRuleCountRank().then((res) => {
        console.log("数据质量规则数排名",res);
        let a = { name: "数据质量规则数排名:", num: res.data };
      });
      GETlistDwSuppObjectType1().then((res) => {
        console.log("数据合格率",res);
        let a = { name: "数据合格率:", num: res.data };
      });
    } else if (type === 14) {
      modalTit.value = "";
    } else if (type === 15) {
      modalTit.value = "";
      dataNum.value = 4;
      GETlstructuredDataStorage().then((res) => {
        modalData1.value = {
          labelName: "结构化数据:",
          labelValue: res.data?.value || 0,
        };
      });
      GETunStructuredDataStorage().then((res) => {
        modalData2.value = {
          labelName: "非结构化数据:",
          labelValue: res.data?.value || 0,
        };
      });
      // 有问题
      semiStructuredDataStorage().then((res) => {
        modalData3.value = {
          labelName: "半结构化数据:",
          labelValue: res.data?.value || 0,
        };
      });

      //应用系统数
      GETdataResourceCount().then(res=>{
        modalData4.value = {
          labelName: "应用系统数:",
          labelValue: res.data?.value || 0,
        };
      })
    } else if (type === 16) {
      modalTit.value = "数据治理任务";
      dataNum.value = 5;
      GETmeasureValueMK1().then((res) => {
        modalData1.value = {
          labelName: "任务总数",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK2().then((res) => {
        modalData2.value = {
          labelName: "正在执行:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK3().then((res) => {
        modalData3.value = {
          labelName: "等待执行:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK4().then((res) => {
        modalData4.value = {
          labelName: "运行成功:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK5().then((res) => {
        modalData5.value = {
          labelName: "运行失败:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 17) {
      dataNum.value = 5;
      modalTit.value = "数据源到元数据";
      modalData1.value = {
        labelName: "任务总数",
        labelValue: 1123,
      };
      modalData2.value = {
        labelName: "正在执行:",
        labelValue: 111,
      };
      modalData3.value = {
        labelName: "等待执行:",
        labelValue: 123,
      };
      modalData4.value = {
        labelName: "执行成功:",
        labelValue: 1100,
      };
      modalData5.value = {
        labelName: "执行失败:",
        labelValue: 11,
      };
    } else if (type === 18) {
      dataNum.value = 5;
      modalTit.value = "采集任务";
      
      GETtaskStatus().then((res) => {
        console.log(res, "数据源到贴原层");
        modalData2.value = {
          labelName: "正在运行数:",
          labelValue: res.data[0]?.value || 0,
        };
        modalData3.value = {
          labelName: "等待运行数:",
          labelValue: res.data[1]?.value || 0,
        };
        modalData4.value = {
          labelName: "成功数:",
          labelValue: res.data[2]?.value || 0,
        };
      });
      GETtaskFailCount().then((res) => {
        modalData5.value = {
          labelName: "失败数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETfirstBusinessCount().then((res) => {
        setTimeout(() => {
          modalData1.value = {
          labelName: "采集任务数",
          labelValue: Number(modalData2.value.labelValue) +Number(modalData3.value.labelValue) + Number(modalData4.value.labelValue) +Number(modalData5.value.labelValue) || 0,
        };
        }, 200);
      });
    } else if (type === 19) {
      dataNum.value = 5;
      modalTit.value = "贴源层到标准层任务";
      GETlistDwSuppObjectTypeNameListMx().then((res) => {
        modalData1.value = {
          labelName: "贴源层到标准层任务数",
          labelValue: res.data[4]?.value || 0,
        };
        modalData2.value = {
          labelName: "任务运行数:",
          labelValue: res.data[0]?.value || 0,
        };
        modalData3.value = {
          labelName: "等待运行数:",
          labelValue: res.data[1]?.value || 0,
        };
        modalData4.value = {
          labelName: "成功数:",
          labelValue: res.data[2]?.value || 0,
        };
        modalData5.value = {
          labelName: "失败数:",
          labelValue: res.data[3]?.value || 0,
        };
      });
    } else if (type === 20) {
      dataNum.value = 5;
      modalTit.value = "标准层到轻度汇总层任务";
      GETmeasureValueMK1216151413().then((res) => {
        // console.log(res);
        modalData1.value = {
          labelName: "标准层到轻度汇总层任务数",
          labelValue: res.data[0]?.count || 0,
        };
        modalData2.value = {
          labelName: "任务运行数:",
          labelValue: res.data[4]?.count || 0,
        };
        modalData3.value = {
          labelName: "等待运行数:",
          labelValue: res.data[1]?.count || 0,
        };
        modalData4.value = {
          labelName: "运行成功数:",
          labelValue: res.data[3]?.count || 0,
        };
        modalData5.value = {
          labelName: "运行失败数:",
          labelValue: res.data[2]?.count || 0,
        };
      });
    } else if (type === 21) {
      dataNum.value = 3;
      modalTit.value = "标准层到主数据";
      GETcountEtlDwmTable().then((res) => {
        modalData1.value = {
          labelName: "标准层主数据表数量:",
          labelValue: res.data?.value || 21,
        };
      });
      GETcolumnsCount().then((res) => {
        modalData2.value = {
          labelName: "字段数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETcountEtlDwsTable().then((res) => {
        modalData3.value = {
          labelName: "记录数:",
          labelValue: res.data?.value || 105814,
        };
      });
    } else if (type === 22) {
      dataNum.value = 2;
      modalTit.value = "轻度汇总层到API";
      GETmeasureValue().then((res) => {
        console.log(res);
        modalData1.value = {
          labelName: "轻度汇总层生成接口数:",
          labelValue: res.data[0]?.value || 0,
        };
        modalData2.value = {
          labelName: "轻度汇总层生成接口表数量:",
          labelValue: res.data[1]?.value || 0,
        };
      });
    } else if (type === 23) {
      dataNum.value = 5;
      modalTit.value = "";
      // 数据标准
      GETmeasureValueMK0105().then((res) => {
        modalData1.value = {
          labelName: "数据标准检验任务数",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK01055().then((res) => {
        modalData5.value = {
          labelName: "失败数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK01054().then((res) => {
        modalData4.value = {
          labelName: "成功数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK01053().then((res) => {
        modalData3.value = {
          labelName: "等待运行数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETmeasureValueMK01052().then((res) => {
        modalData2.value = {
          labelName: "运行数:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 24) {
      dataNum.value = 1;
      modalTit.value = "指标数";
      GETcountIIndicatorType().then((res) => {
        modalData1.value = {
          labelName: "指标数:",
          labelValue: res.data?.count || 0,
        };
      });
    } else if (type === 25) {
      dataNum.value = 5;
      modalTit.value = "质量检查任务";
      
      GETqualityCheckTaskRunCount().then((res) => {
        modalData2.value = {
          labelName: "任务运行数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETqualityCheckTaskWaitCount().then((res) => {
        modalData3.value = {
          labelName: "等待运行数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETqualityCheckTaskSuccessCount().then((res) => {
        modalData4.value = {
          labelName: "成功数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETqualityCheckTaskFailCount().then((res) => {
        modalData5.value = {
          labelName: "失败数:",
          labelValue: res.data?.count || 0,
        };
      });
      GETqualityCheckTaskCount().then((res) => {
        setTimeout(() => {
          modalData1.value = {
          labelName: "任务总数",
          labelValue: Number(modalData2.value.labelValue) + Number(modalData3.value.labelValue) + Number(modalData4.value.labelValue) + Number(modalData5.value.labelValue)|| 0,
        };
        }, 200);
      });
    } else if (type === 26) {
      dataNum.value = 2;
      modalTit.value = "标准层到指标管理";
      GETmeasureValueMK0701018().then((res) => {
        modalData1.value = {
          labelName: "标准层用于生成接口表数量:",
          labelValue: res.data?.value || 0,
        };
      });
      GETmeasureValueMK0701026().then((res) => {
        modalData2.value = {
          labelName: "标准层生成接口数量:",
          labelValue: res.data?.value || 0,
        };
      });
    } else if (type === 27) {
      dataNum.value = 2;
      modalTit.value = "轻度汇总层到指标管理";
      GETmeasureValue().then((res) => {
        modalData2.value = {
          labelName: "轻度汇总层生成接口数:",
          labelValue: res.data[0]?.value || 0,
        };
        modalData1.value = {
          labelName: "轻度汇总层生成接口表数量:",
          labelValue: res.data[1]?.value || 0,
        };
      });
    }
  };
  const clearData = () => {
    dataNum.value = 5;
    modalTit.value = " ";
    modalData1.value = { labelName: "任务总数", labelValue: 0 };
    modalData2.value = { labelName: "正在执行", labelValue: 0 };
    modalData3.value = { labelName: "等待执行", labelValue: 0 };
    modalData4.value = { labelName: "运行成功", labelValue: 0 };
    modalData5.value = { labelName: "运行失败", labelValue: 0 };
  };
</script>

<style scoped>
  .pointer {
    cursor: pointer;
  }

  .line-box {
    z-index: 5;
  }

  .line-box1 {
    position: absolute;
    top: 285px;
    right: 1300px;
    width: 250px;
    height: 70px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-30deg);
  }

  .line-box2 {
    position: absolute;
    top: 370px;
    right: 1200px;
    width: 300px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box3 {
    position: absolute;
    top: 480px;
    right: 1100px;
    width: 80px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box4 {
    position: absolute;
    top: 380px;
    right: 930px;
    width: 120px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box5 {
    position: absolute;
    top: 310px;
    right: 780px;
    width: 100px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box6 {
    position: absolute;
    top: 405px;
    right: 750px;
    width: 150px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(20deg);
  }

  .line-box7 {
    position: absolute;
    top: 255px;
    right: 640px;
    width: 100px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box8 {
    position: absolute;
    top: 250px;
    right: 1050px;
    width: 80px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box9 {
    position: absolute;
    top: 130px;
    right: 780px;
    width: 80px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box10 {
    position: absolute;
    top: 400px;
    right: 1010px;
    width: 60px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box11 {
    position: absolute;
    top: 420px;
    right: 890px;
    width: 130px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(25deg);
  }

.middle-sjzc {
  position: absolute;
  top: 57px;
  right: 708px;
  width: 100px;
  height: 115px;
  background-image: url("../../../static/middle/sjzc.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.middle-zbgl {
  position: absolute;
  top: 111px;
  right: 845px;
  width: 100px;
  height: 115px;
  background-image: url("../../../static/middle/zbgl.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.middle-sjbz {
  position: absolute;
  top: 179px;
  right: 970px;
  width: 100px;
  height: 115px;
  background-image: url("../../../static/middle/sjbzzz.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.middle-ysj {
  position: absolute;
  top: 239px;
  right: 1117px;
  width: 100px;
  height: 115px;
  background-image: url("../../../static/middle/ysj.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
  .line-box12 {
    position: absolute;
    top: 190px;
    right: 910px;
    width: 50px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box13 {
    position: absolute;
    top: 220px;
    right: 860px;
    width: 100px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(25deg);
  }

  .line-box14 {
    position: absolute;
    top: 225px;
    right: 795px;
    width: 70px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(-25deg);
  }

  .line-box15 {
    position: absolute;
    top: 185px;
    right: 805px;
    width: 70px;
    height: 20px;
    /* background-color: #fff; */
    cursor: pointer;
    transform: rotate(23deg);
  }

  .middle-dxyy {
    position: absolute;
    top: 19px;
    right: 559px;
    width: 118px;
    height: 79px;
    background-image: url("../../../static/middle/DXYY.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-bmjsc {
    position: absolute;
    top: 57px;
    right: 471px;
    width: 118px;
    height: 79px;
    background-image: url("../../../static/middle/BMJSC.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-znfx {
    position: absolute;
    top: 91px;
    right: 371px;
    width: 118px;
    height: 79px;
    background-image: url("../../../static/middle/ZNFX.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-irs {
    position: absolute;
    top: 126px;
    right: 268px;
    width: 109px;
    height: 79px;
    background-image: url("../../../static/middle/IRS.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-api {
    position: absolute;
    top: 169px;
    right: 579px;
    width: 105px;
    height: 108px;
    background-image: url("../../../static/middle/API.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-qdhzc {
    position: absolute;
    top: 230px;
    right: 711px;
    width: 111px;
    height: 107px;
    background-image: url("../../../static/middle/QDHZC.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-bzc {
    position: absolute;
    top: 290px;
    right: 854px;
    width: 120px;
    height: 120px;
    background-image: url("../../../static/middle/BZC.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-tyc {
    position: absolute;
    top: 362px;
    right: 1036px;
    width: 105px;
    height: 108px;
    background-image: url("../../../static/middle/TYC.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  

 

  

  .middle-ysj {
    position: absolute;
    top: 239px;
    right: 1117px;
    width: 100px;
    height: 115px;
    background-image: url("../../../static/middle/ysj.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-sjzl {
    position: absolute;
    top: 429px;
    right: 807px;
    width: 100px;
    height: 115px;
    background-image: url("../../../static/middle/sjzl.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-zsj {
    position: absolute;
    top: 379px;
    right: 650px;
    width: 100px;
    height: 115px;
    background-image: url("../../../static/middle/zsj.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .middle-sjy {
    position: absolute;
    top: 415px;
    right: 1200px;
    width: 185px;
    height: 211px;
    background-image: url("../../../static/middle/sjy.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .zzcxs-1 {
    position: absolute;
    top: 479px;
    right: 1080px;
  }

  .sscj {
    position: absolute;
    top: 420px;
    right: 1310px;
  }

  .T1 {
    position: absolute;
    top: 445px;
    right: 1270px;
  }

  .zzcxs-2 {
    position: absolute;
    top: 395px;
    right: 930px;
  }

  .zzcxs-3 {
    position: absolute;
    top: 325px;
    right: 770px;
  }

  .zzcxs-4 {
    position: absolute;
    top: 255px;
    right: 620px;
  }

  .zzcxs-5 {
    position: absolute;
    top: 200px;
    right: 500px;
  }

  .zzcxs-t {
    position: absolute;
    top: 25px;
    left: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #18e1ff;
    transform: rotateX(60deg);
  }

  .zzcxs-t_1 {
    transform: rotate(-45deg);
  }

  .modal-show {
    position: absolute;
    top: v-bind(t);
    right: v-bind(r);
    z-index: 10;
  }
</style>